<template>
	<div class="page-content _rel _flex _p20 _flex-a-start _flex-a-stretch _wrapper">
		<div class="_flex-item-1 _border" ref="content"></div>
		<div class="_p20">
			<button @click="randomAdd"> 随机添加元素 </button>
			<button @click="openRain"> {{ isOpenRain ? '关闭' : '开启' }}下雨效果</button>
			<div>
				<input v-model="text">
				<button @click="addText">确定</button>
				<button @click="add3DText">3D</button>
			</div>
		</div>
	</div>
</template>

<script>
	import ThreeMain from "@/components/n-three/ThreeMain.js";

	export default {
		name: "Tool3D",
		data() {
			return {
				isOpenRain: false,
				text: ''
			}
		},
		setup() {
			
		},
		mounted() {
			this.$nextTick(() => {
				ThreeMain.init({
					dom: this.$refs["content"],
					showAxesHelperTag: true,
					showGridTag: true
				})
			})
		},
		methods: {
			randomAdd() {
				ThreeMain.randomElement()
			},
			openRain() {
				if (this.isOpenRain) {
					ThreeMain.closeRain()
				} else {
					ThreeMain.openRain()
				}
				this.isOpenRain = !this.isOpenRain
			},
			addText() {
				if (this.text && this.text.trim().length > 0) {
					ThreeMain.addText(this.text)
				}
			},
			add3DText() {
				if (this.text && this.text.trim().length > 0) {
					ThreeMain.add3DText(this.text)
				}
			}
		}
	}
</script>

<style scoped>
	canvas {
		width: 100%;
		height: 100%
	}
	
	.page-content {
		height: 80vh;
	}
</style>
